<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <link rel="stylesheet" href="../static/js/layui/css/layui.css"/>
    <link rel="stylesheet" href="../static/css/style.css">
    <link rel="stylesheet" href="../static/css/x-admin.css" type="text/css">
    <link rel="stylesheet" href="../static/css/iconfont.css">


    <!--css start-->
    <style>
        .clear {
            clear: both
        }

        .login-ic {
            background: rgba(255, 255, 255, 0.25);
            margin-bottom: 1.5em;
            padding: 8px;
        }

        .login-ic i {
            background: url("../static/img/login/m.png") no-repeat 6px 6px;
            width: 38px;
            height: 38px;
            float: left;
            display: inline-block;
        }

        .login-ic i.icon {
            background: url("../static/img/login/l.png") no-repeat 6px 6px;
        }

        .login-ic input[type="text"], .login-ic input[type="password"] {
            float: left;
            background: none;
            outline: none;
            font-size: 15px;
            color: #ffffff;
            padding: 10px 16px;
            border: none;
            border-left: 1px solid #fff;
            display: inline-block;
            /*margin-left: 7px;*/
        }

        i.passcode {
            background: url("../static/img/login/passcode.jpg") no-repeat 0px 6px;
            float: left;
        }

        .body {
            background: rgba(0, 0, 0, 0.25);
            height: 250px;
            opacity: 1;
            filter: alpha(opacity=100);
            -moz-opacity: 1;
            -khtml-opacity: 1;
        }

        .body:hover {
            opacity: 0;
            filter: alpha(opacity=0);
            -moz-opacity: 0;
            -khtml-opacity: 0;
        }

        .body, .body-hide, .body-blur {
            transition: opacity 2s;
            -moz-transition: opacity 2s;
            -webkit-transition: opacity 2s;
            -o-transition: opacity 2s;
        }

        .body-hide:hover {
            opacity: 1;
            filter: alpha(opacity=100);
            -moz-opacity: 1;
            -khtml-opacity: 1;
        }

        .body-hide {
            opacity: 0;
            background: url(static/img/bg-1-1.png);
            background-size: 100% 100%;
            height: 400px;
            margin: -310px 0;
            width: 100%;
            -webkit-box-shadow: 0 0 20px #b1b6cb;
            transform-origin: center;
            filter: alpha(opacity=0);
            -moz-opacity: 0;
            -khtml-opacity: 0;
            z-index: 1;
        }

        .div-show {
            opacity: 1;
        }

        .div-hide {
            opacity: 0;
        }

        .body-blur {
            position: absolute;
            width: 380px;
            height: 350px;
            margin: 0 53%;
            background: rgba(219, 219, 219, 0.25) center center fixed;
            -webkit-filter: blur(5px);
            opacity: 0;
            z-index: 2;
        }

        .layui-btn,.login-ic {
            z-index:5;
        }

    </style>
    <!--css end-->
    #include("/template/common/include/_css.html")
</head>

<body>
<!--content start-->
<div class="bg" style="position:absolute;width: 100%;height: 100%;z-index: -1">
    <img src="../static/img/bg-1.png" height="100%" width="100%"/>
</div>
<div class="header" style="height:180px ">
    <div class="header-title" style="background: rgba(219,219,219,0.1);height: 70px">
        <br>
        <a class="title" style="color: white;font-size: 24px;margin:0 200px;font-weight: 200;white-space:nowrap; "
           href="#(ctxPath)/app/filingfrom">#(APP.name)</a></div>
</div>
<div class="body" id="a">
    <div class="body-text">
        <br><br><br><br><br>
        <h2 style="text-align: center;font-size: 30px;color: white;font-weight: 200">登录&nbsp;•&nbsp;注册</h2>
    </div>
</div>
<div class="body-hide" style="" id="b">
    <div class="login" style="text-align: center;">
        <br>
        <div class="body-blur" style=" "></div>
        <form method="post" action="" id="form" style="margin: 0 55%">
            <br><br><br>
            <div class="login-ic " style="width: 300px;position: relative;border-radius: 4px">
                <i></i>
                <input type="text" id="loginName" name="loginName" placeholder="请输入用户名" maxlength="25" required="required"
                       autocomplete="on" maxlength="16" minlength="4"/>
                <div class="clear"></div>
            </div>
            <div class="login-ic" style="width:300px;position: relative;border-radius: 4px">
                <i class="icon"></i>
                <input type="password" id="password" name="password" placeholder="请输入密码" maxlength="20" required="required"
                       maxlength="16" minlength="6"/>
                <div class="clear"></div>
            </div>
            <div class="login-ic" style="width:300px;position: relative;border-radius: 4px">
                <i class="icon"></i>
                <input type="text" name="capval" lay-verify="required" placeholder="验证码" maxlength="4"
                       minlength="4" required="required" style="width: 120px"/>
                <img id="captchaImg" alt="验证码" src="#(ctxPath)/captcha"
                     onclick="this.src='#(ctxPath)/captcha?'+Math.random()">
                <div class="clear"></div>
            </div>
            <div class="log-bwn" style="text-align: center;width: 300px">
                <button class="layui-btn  layui-btn-radius"
                        style="background:rgba(219,219,219,0.35);;position: relative;width: 120px;border-radius: 4px" lay-submit
                        lay-filter="sub">登&nbsp;&nbsp;&nbsp;录
                </button>
                <button class="layui-btn  layui-btn-radius"
                        style="background-color:rgba(219,219,219,0.35);position: relative;width: 120px;border-radius: 4px;" id="reg">注&nbsp;&nbsp;&nbsp;册
                </button>
            </div>
        </form>
    </div>
</div>
#include("/template/common/include/_js.html")
<!--content end-->
<script type="text/javascript" src="../static/js/layui/layui.js"></script>
<script type="text/javascript" src="../static/js/comm_notbar.js"></script>
<script type="text/javascript" src="../static/js/utils.js"></script>
<script type="text/javascript" src="../static/js/ztree/jquery-1.4.4.min.js"></script>
<!--js start-->
<script type="text/javascript">
    layui.use(['form', 'layer', 'element'], function () {
        var form = layui.form
            , layer = layui.layer
            , laydate = layui.laydate
            , $ = layui.jquery
            , table = layui.table;

        $.fn.serializeJson = function () {
            var serializeObj = {};
            $(this.serializeArray()).each(function () {
                serializeObj[this.name] = this.value;
            });
            return serializeObj;
        };

        setInterval(function () {
            var b = $('#b');
            var a = $('#a');
            var bg = $(' .body-blur');
            if (b.css("opacity") >= 0.5) {
                a.css("opacity", "0");
                bg.css("opacity", "1");
            } else {
                a.css("opacity", "1");
                bg.css("opacity", "0");
            }
        }, 100);

        $(document).on("focus", "input", function () {
            $('#b').addClass("div-show");
        }).on("blur", "input", function () {
            $('#b').removeClass("div-show");
        });


        form.on('submit(sub)', function (data) {
            var all = $('#form').serializeJson();
            util.sendAjax({
                type: 'POST',
                url: '#(ctxPath)/postLogin',
                data: all,
                loadFlag: true,
                success: function (data) {
                    window.location.href = "/";
                },
                complete: function () {
                    // 刷新验证码
                    $("#captchaImg").attr('src', '#(ctxPath)/captcha?' + Math.random());
                }
            });

            return false;
        });
        $(document).on('click', '#reg', function () {
            window.location.href = "/register";
        });
    });
</script>
<!--js end-->
</body>
</html>